<template>
    <el-menu
            active-text-color="#40A9FF"
            background-color="white"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="black">
        <el-menu-item>
            <span slot="title">欢迎：{{ $store.state.sysUser.username }}</span>
        </el-menu-item>
        <router-link to="/">
            <el-menu-item index="1">
                <template slot="title">
                    <i class="el-icon-s-home"></i>
                </template>
                <span slot="title">首页</span>

            </el-menu-item>
        </router-link>
        <el-submenu v-for="menu in menuList" :index="menu.name" :key="menu.name">
            <template slot="title">
                <i :class="menu.icon"></i>
                <span>{{ menu.title }}</span>
            </template>
            <router-link v-for="item in menu.children" :to="item.path" :key="item.name">
                <el-menu-item :index="item.name">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span slot="title">{{ item.title }}</span>
                    </template>
                </el-menu-item>
            </router-link>
        </el-submenu>

    </el-menu>
</template>

<script>
export default {
    name: 'modelAside',
    data() {
        return {
        }
    },
    computed: {
        menuList:{
            get() {
                return this.$store.state.menus.menuList
            }
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        openxgk() {
            let token = localStorage.getItem("token");
            if (token) {
            } else {
                this.$message({
                    message: '请先登录',
                    type: 'warning'
                });
            }
        }
    }
}
</script>

<style scoped>
a {
    text-decoration: none;
}

.router-link-active {
    text-decoration: none;
}

.el-menu-vertical-demo {
    height: 100%;
}

.el-submenu, .el-menu-item {
    text-align: left;
}
</style>
